<template src="./index.html"></template>
<style src="./index.scss" lang="scss" scoped></style>

<script>
export default {
    props: {
        // 当前页
        current: {
            type: Number,
            default: 1,
        },
        //总数据数
        total: {
            type: Number,
            default: 100,
        },
        // 一页多少条数据
        limit: {
            type: Number,
            default: 10,
        },
        // 显示数据页数(1-10选项)
        visibleNumber: {
            type: Number,
            default: 15,
        },
    },
    data() {
        return {
            
        }
    },
    created() {
        
    },
    computed: {
        // 总页数
        pageNumber() {
        return Math.ceil(this.total / this.limit); // 向上取整
        },
        // 得到显示的最小/最大数
        visibleMin() {
        let min = this.current - Math.floor(this.visibleNumber / 2);
        if (min < 1) {
            min = 1;
        }
        return min;
        },
        visibleMax() {
            let max = this.visibleMin + this.visibleNumber - 1;
            if (max > this.pageNumber) {
                max = this.pageNumber;
            }
            return max;
        },
        numbers() {
            let num = [];
            for (let i = this.visibleMin; i <= this.visibleMax; i++) {
                num.push(i);
            }
            return num;
        },
    },
    methods: {
        handleClick(newPage) {
            // console.log(newPage);
            if (newPage < 1) {
                newPage = 1;
            }
            if (newPage > this.pageNumber) {
                newPage = this.pageNumber;
            }
            if (newPage == this.current) {
                return;
            }
            // 抛出一个事件，（需到父组件自定义事件，newPage传到父组件自定义事件参数里）
            this.$emit("pageChange", newPage);
        },
    }
}
</script>

